<template>
  <div class="head_box unselect">
    <div class="head_text">
      <img src="@/images/yflogo.png" />
      <!-- 标题 -->
      <span class="titlemain">全自动血液细胞分析仪虚拟实验系统</span>
    </div>
    <audio id="myAudio" :src="audioUrl" ref="music" @ended="bfwc(audioUrl)">
      您的浏览器不支持 audio 元素 -正在播放{{ audioUrl }}
    </audio>
    <div class="head_right clearfix">
      <!-- <div
        v-if="homeshow"
        class="head_rightmenuitem clearfix"
        @click.stop="loding"
        title="首页"
      >
        <img src="@/images/home.png" class="normal" />
        <img src="@/images/homeac.png" class="active" />
      </div> -->
      <!-- <div
        v-show="tipfnshow"
        class="head_rightmenuitem clearfix"
        @click.stop="tipsfn"
        title="提示"
      >
        <img src="@/images/ts.png" class="normal" />
        <img src="@/images/tsac.png" class="active" />
      </div> -->
      <div
        class="head_rightmenuitem clearfix"
        @click.stop="audoFn"
        title="静音/取消静音"
        v-if="!audo"
      >
        <img src="@/images/bf.png" class="normal" />
        <img src="@/images/bfac.png" class="active" />
      </div>
      <div
        class="head_rightmenuitem clearfix"
        @click.stop="audoFns"
        title="静音/取消静音"
        v-if="audo"
      >
        <img src="@/images/gb.png" class="active" />
        <img src="@/images/gbac.png" class="normal" />
      </div>

      <div
        class="head_rightmenuitem clearfix"
        @click.stop="closeFn"
        title="退出"
      >
        <img src="@/images/fh.png" class="normal" />
        <img src="@/images/fhac.png" class="active" />
      </div>
      <!-- <div
        class="head_rightmenuitem clearfix"
        @click.stop="fullScreenAll"
        title="全屏"
      >
        <img src="@/images/head_rightmenuitem5.png" class="normal" />
        <img src="@/images/head_rightmenuitem5_ac.png" class="active" />
        <img src="@/images/head_rightmenuitem3.png" class="normal" />
        <img src="@/images/head_rightmenuitem3_ac.png" class="active" />
      </div> -->
    </div>
  </div>
</template>
<script>
export default {
  props: {
    audioUrl: String,
    tipshow: Boolean
  },
  data() {
    return {
      isFull: false,
      // tipshow: false,
      audo: false //是否静音
    }
  },
  watch: {
    audioUrl: {
      handler(vars) {
        let realAudio = this.$refs.music
        //根据index播放提示音频
        if (vars) {
          this.$nextTick(() => {
            realAudio.play()
          })
          // 解决频繁切换过程中异步调用报错问题
          // let playPromise = realAudio.play()
          // if (playPromise !== undefined) {
          //   playPromise.then(() => {}).catch(() => {})
          // }
        } else {
          if (realAudio) {
            realAudio.pause()
          }
        }
      },
      immediate: true,
      deep: true
    }
    // audioUrl(val) {
    //   let realAudio = this.$refs.music

    //   //根据index播放提示音频
    //   if (val) {
    //     this.$nextTick(() => {
    //       realAudio.play()
    //     })
    //     // 解决频繁切换过程中异步调用报错问题
    //     // let playPromise = realAudio.play()
    //     // if (playPromise !== undefined) {
    //     //   playPromise.then(() => {}).catch(() => {})
    //     // }
    //   } else {
    //     realAudio.pause()
    //   }
    // }
  },

  methods: {
    loding() {
      this.$router.push({
        name: '/'
      })
    },
    tipsfn(i) {
      this.$emit('tipsfn', i)
    },
    //关闭按钮
    closeFn() {
      if (
        navigator.userAgent.indexOf('Firefox') != -1 ||
        navigator.userAgent.indexOf('Chrome') != -1
      ) {
        window.location.href = 'about:blank'
        window.close()
      } else {
        window.opener = null
        window.open('', '_self')
        window.close()
      }
    },
    //静音按钮
    audoFn() {
      var element = document.querySelectorAll('video, audio')

      element[0].muted = true

      this.audo = !this.audo
    },
    //取消静音按钮
    audoFns() {
      var element = document.querySelectorAll('video, audio')
      element[0].muted = false
      this.audo = !this.audo
    },
    fullScreenAll() {
      let docElm = document.querySelector('#app')

      if (this.isFull) {
        this.isFull = false
        if (document.exitFullscreen) {
          document.exitFullscreen()
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen()
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen()
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen()
        }
      } else {
        this.isFull = true
        if (docElm.requestFullscreen) {
          docElm.requestFullscreen()
        } else if (docElm.msRequestFullscreen) {
          docElm.msRequestFullscreen()
        } else if (docElm.mozRequestFullScreen) {
          docElm.mozRequestFullScreen()
        } else if (docElm.webkitRequestFullScreen) {
          docElm.webkitRequestFullScreen()
        }
      }
    },
    //播放完成
    bfwc(i) {
      this.$emit('bfwc', i)
      console.log('播放完成')
    }
  }
}
</script>
<style></style>
